<template>
    <div class="common-layout">
        <el-container style="height: 90vh;">
            <el-header class="header">
                <div class="header-content">
                    <span class="header-title">精品课：{{ classroomDetail.classroomName }}</span>
                    <div class="button-group">
                        <el-button v-if="!isPurchased" class="back-button" @click="buy" type="primary">购买</el-button>
                        <el-button v-else class="back-button" disabled type="primary">已购买</el-button>
                        <el-button class="back-button" @click="goBack" type="primary">返回</el-button>
                    </div>
                </div>
            </el-header>
            <el-main class="main">
                <div class="classroom-info">
                    <div class="classroom-details">
                        <span>班级名称: {{ classroomDetail.classroomName }}</span>
                        <span>班级类型: {{ classroomDetail.classroomType }}</span>
                        <span>开课日期: {{ classroomDetail.startDate }}</span>
                        <span>班级状态: {{ getStatusText(classroomDetail.status) }}</span>
                    </div>
                    <div class="classroom-bio" v-html="classroomDetail.bio"></div> <!-- 使用 v-html 展示富文本 -->
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { enrolledInAClassService, getClassroomDetailService, buyClassroom } from "@/apis/classroom";
import router from "@/router";
import { ElMessage } from "element-plus"; // 确保 ElMessage 已导入

const route = useRoute();
const classroomId = route.query.classroomId;

function goBack() {
    router.go(-1);
}

const buy = async () => {
    const confirmed = window.confirm("您确定要购买该商品吗？");
    if (confirmed) {
        console.log("购买操作进行中...");
        await buyClassroom(classroomId);
        enrolledInAClass();
        ElMessage.success('购买成功');
    }
};

const classroomDetail = reactive({});
async function getClassroomDetail() {
    const res = await getClassroomDetailService(classroomId);
    Object.assign(classroomDetail, res.data);
    console.log("classroomDetail", classroomDetail);
}

onMounted(() => {
    getClassroomDetail();
});

const isPurchased = ref(false);

async function enrolledInAClass() {
    const res = await enrolledInAClassService(classroomId);
    isPurchased.value = res.data;
}
enrolledInAClass();

// 状态文本方法
const getStatusText = (status) => {
    switch (status) {
        case 0: return '未发布';
        case 1: return '报名中';
        case 2: return '已开课';
        case 3: return '已结业';
        default: return '未知状态';
    }
};
</script>

<style lang="scss" scoped>
.common-layout {
    background-color: #f0f4ff;

    .header {
        height: 6%;
        display: flex;
        align-items: center;
        background-color: #007bff;
        color: white;

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            width: 100%;

            .header-title {
                font-size: 20px;
            }

            .button-group {
                display: flex;

                .back-button {
                    margin-left: 10px;
                }
            }
        }
    }

    .classroom-info {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

        .classroom-details {
            display: flex;
            justify-content: space-between;
            /* 均匀分布 */
            margin-bottom: 20px;

            span {
                flex: 1;
                /* 均分宽度 */
                text-align: center;
                /* 文本居中 */
            }
        }

        .classroom-bio {
            margin-top: 20px;
            border-top: 1px dashed #ccc;
            /* 虚线边框 */
            padding-top: 10px;
            /* 上内边距 */
        }
    }
}
</style>